

In [ ]:

    
import numpy as np
from bqplot import (ColorScale, GridHeatMap, Axis, 
                    Figure, OrdinalScale, LinearScale)

Get Data



In [ ]:

    
np.random.seed(0)
data = np.random.randn(10, 10)

Basic Heat map



In [ ]:

    
col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc})

Figure(marks=[grid_map], padding_y=0.0)



In [ ]:

    
grid_map.display_format = '.2f'



In [ ]:

    
grid_map.font_style={'font-size': '12px', 'fill':'black', 'font-weight': 'bold'}



In [ ]:

    
grid_map.display_format = None

Heat map with axes



In [ ]:

    
x_sc, y_sc, col_sc = OrdinalScale(), OrdinalScale(reverse=True), ColorScale()

grid_map = GridHeatMap(color=data, scales={'column': x_sc, 'row': y_sc, 'color': col_sc})
ax_x, ax_y = Axis(scale=x_sc), Axis(scale=y_sc, orientation='vertical')

Figure(marks=[grid_map], axes=[ax_x, ax_y], padding_y=0.0)

Non Uniform Heat map



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

## The data along the rows is not uniform. Hence the 5th row(from top) of the map
## is twice the height of the remaining rows.
row_data = np.arange(10)
row_data[5:] = np.arange(6, 11)

column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])



In [ ]:

    
print(row_data.shape)
print(column_data.shape)
print(data.shape)

Alignment of the data with respect to the grid

For a N-by-N matrix, N+1 points along the row or the column are assumed to be end points.



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(11)
column_data = np.arange(10, 21)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

By default, for N points along any dimension, data aligns to the start of the rectangles in the grid. The grid extends infinitely in the other direction. By default, the grid extends infintely towards the bottom and the right.



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(10)
column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

By changing the row_align and column_align properties, the grid can extend in the opposite direction



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, min=-5, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(10)
column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                      scales={'row': y_sc, 'column': x_sc, 'color': col_sc},
                      row_align='end')
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

For N+1 points on any direction, the grid extends infintely in both directions



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, min=-5, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

row_data = np.arange(9)
column_data = np.arange(10, 20)

grid_map = GridHeatMap(row=row_data, column=column_data, color=data, 
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc}, row_align='end')
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

Changing opacity and stroke



In [ ]:

    
col_sc = ColorScale()

grid_map = GridHeatMap(color=data, scales={'color': col_sc}, opacity=0.3, stroke='white')
Figure(marks=[grid_map], padding_y=0.0)

Selections on the grid map

Selection on the GridHeatMap works similar to excel. Clicking on a cell selects the cell, and deselects the previous selection. Using the Ctrl key allows multiple cells to be selected, while the Shift key selects the range from the last cell in the selection to the current cell.



In [ ]:

    
data = np.random.randn(10, 10)

col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc}, interactions={'click':'select'},
                      selected_style={'opacity': '1.0'}, unselected_style={'opacity': 0.4})

Figure(marks=[grid_map], padding_y=0.0)

The selected trait of a GridHeatMap contains a list of lists, with each sub-list containing the row and column index of a selected cell.



In [ ]:

    
grid_map.selected

Registering `on_element_click` event handler



In [ ]:

    
import numpy as np
from IPython.display import display
from bqplot import *

np.random.seed(0)
data = np.random.randn(10, 10)
col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc}, 
                       interactions={'click': 'select'},
                       selected_style={'stroke': 'blue', 'stroke-width': 3})
figure=Figure(marks=[grid_map], padding_y=0.0)

from ipywidgets import Output
out = Output()
@out.capture()
def print_event(self, target):
    print(target)
    
# test
print_event(1, 'test output')
grid_map.on_element_click(print_event)

display(figure)
display(out)